<template>

  <div class="common-layout" style="width: 100%;margin: 0px">
    <el-container style="width: 1260px; margin: 0 auto;">
      <el-header style="margin: 0;padding: 0">
        <!-- 地区搜索卡片 -->
        <el-card style="margin-top:0;height: 80px; ">
          <el-form :inline="true" >
            <el-form-item label="取车门店:" style="margin-left: 40px; font-weight: bold">
              <el-popover placement="bottom" :width="300" trigger="click">
                <template #reference>
                  <el-input autocomplete="off" class="citysel"
                            id="PickupCity" maxlength="10" name="PickUpCity"
                            type="text" :value="selectedCity">
                  </el-input>
                </template>
                <h3 style="text-align: center;margin:0px 0px 5px 0px;" >请选择地区</h3>
                <el-row :gutter="10" class="row1">
                  <el-col :span="6">
                    <el-link v-on:click="setCity('朝阳')">朝阳区</el-link>
                  </el-col>
                  <el-col :span="6">
                    <el-link v-on:click="setCity('西城')">西城区</el-link>
                  </el-col>
                  <el-col :span="6">
                    <el-link v-on:click="setCity('东城')">东城区</el-link>
                  </el-col>
                  <el-col :span="6">
                    <el-link v-on:click="setCity('丰台')">丰台区</el-link>
                  </el-col>
                </el-row>
                <el-row :gutter="10" class="row1">
                  <el-col :span="6">
                    <el-link v-on:click="setCity('石景山')">石景山区</el-link>
                  </el-col>
                  <el-col :span="6">
                    <el-link v-on:click="setCity('海淀')">海淀区</el-link>
                  </el-col>
                  <el-col :span="6">
                    <el-link v-on:click="setCity('顺义')">顺义区</el-link>
                  </el-col>
                  <el-col :span="6">
                    <el-link v-on:click="setCity('通州')">通州区</el-link>
                  </el-col>
                </el-row>
                <el-row :gutter="10" class="row1">
                  <el-col :span="6">
                    <el-link v-on:click="setCity('大兴')">大兴区</el-link>
                  </el-col>
                  <el-col :span="6">
                    <el-link v-on:click="setCity('房山')">房山区</el-link>
                  </el-col>
                  <el-col :span="6">
                    <el-link v-on:click="setCity('门头沟')">门头沟区</el-link>
                  </el-col>
                  <el-col :span="6">
                    <el-link v-on:click="setCity('昌平')">昌平区</el-link>
                  </el-col>
                </el-row>
                <el-row :gutter="10" class="row1">
                  <el-col :span="6">
                    <el-link v-on:click="setCity('平谷')">平谷区</el-link>
                  </el-col>
                  <el-col :span="6">
                    <el-link v-on:click="setCity('密云')">密云区</el-link>
                  </el-col>
                  <el-col :span="6">
                    <el-link v-on:click="setCity('怀柔')">怀柔区</el-link>
                  </el-col>
                  <el-col :span="6">
                    <el-link v-on:click="setCity('延庆')">延庆区</el-link>
                  </el-col>
                </el-row>
              </el-popover>

                <el-select placeholder="请选择" v-model="cars.outletsId" style="width: 150px;" @change="insertOutletId"  @click="loadOutlets1(selectedCity)" >
                  <el-option v-for="outlet in outletsArr1" :label=outlet.stationName :value=outlet.id ></el-option>
                </el-select>

            </el-form-item>

            <el-form-item label="还车门店:" style="font-weight: bold">
              <el-popover placement="bottom" :width="300" trigger="click">
                <template #reference>
                  <el-input autocomplete="off" class="citysel"
                            id="PickupCity" maxlength="10" name="PickUpCity" type="text" :value="selectedCity1">
                  </el-input>
                </template>
                <h3 style="text-align: center;margin:0px 0px 5px 0px;">请选择地区</h3>
                <el-row :gutter="10" class="row1">
                  <el-col :span="6">
                    <el-link v-on:click="setCity1('朝阳')">朝阳区</el-link>
                  </el-col>
                  <el-col :span="6">
                    <el-link v-on:click="setCity1('西城区')">西城区</el-link>
                  </el-col>
                  <el-col :span="6">
                    <el-link v-on:click="setCity1('东城')">东城区</el-link>
                  </el-col>
                  <el-col :span="6">
                    <el-link v-on:click="setCity1('丰台')">丰台区</el-link>
                  </el-col>
                </el-row>
                <el-row :gutter="10" class="row1">
                  <el-col :span="6">
                    <el-link v-on:click="setCity1('石景山')">石景山区</el-link>
                  </el-col>
                  <el-col :span="6">
                    <el-link v-on:click="setCity1('海淀')">海淀区</el-link>
                  </el-col>
                  <el-col :span="6">
                    <el-link v-on:click="setCity1('顺义')">顺义区</el-link>
                  </el-col>
                  <el-col :span="6">
                    <el-link v-on:click="setCity1('通州')">通州区</el-link>
                  </el-col>
                </el-row>
                <el-row :gutter="10" class="row1">
                  <el-col :span="6">
                    <el-link v-on:click="setCity1('大兴')">大兴区</el-link>
                  </el-col>
                  <el-col :span="6">
                    <el-link v-on:click="setCity1('房山')">房山区</el-link>
                  </el-col>
                  <el-col :span="6">
                    <el-link v-on:click="setCity1('门头沟')">门头沟区</el-link>
                  </el-col>
                  <el-col :span="6">
                    <el-link v-on:click="setCity1('昌平')">昌平区</el-link>
                  </el-col>
                </el-row>
                <el-row :gutter="10" class="row1">
                  <el-col :span="6">
                    <el-link v-on:click="setCity1('平谷')">平谷区</el-link>
                  </el-col>
                  <el-col :span="6">
                    <el-link v-on:click="setCity1('密云')">密云区</el-link>
                  </el-col>
                  <el-col :span="6">
                    <el-link v-on:click="setCity1('怀柔')">怀柔区</el-link>
                  </el-col>
                  <el-col :span="6">
                    <el-link v-on:click="setCity1('延庆')">延庆区</el-link>
                  </el-col>
                </el-row>
              </el-popover>

              <el-select placeholder="请选择" v-model="selectStationName.bakeStation" style="width: 150px;"   @click="loadOutlets2(selectedCity1)" >
                <el-option v-for="outlet in outletsArr2" :label=outlet.stationName :value=outlet.id ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="时间:" style="width:350px;font-weight: bold">
              <el-date-picker
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="取车时间"
                  end-placeholder="还车时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  format="YYYY-MM-DD HH:mm:ss"
                  v-model="times1"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button class="cxbutton"  type="success"   @click="visibleStation2" style="width:100px">查询</el-button>
            </el-form-item>

          </el-form>
        </el-card>
      </el-header>
      <el-container>
        <el-aside style="width: 330px; overflow: hidden;">
            <el-form :inline="true" style="margin-top: 20px">
              <!--  第六步：创建地图容器元素-->
              <div style="width: 100%; height: 250px;" id="mapContainer"></div>
            </el-form>
            <div style="width: 100%; height: 250px;" v-if="stationVisible">
              <p style=" font-size: 24px; color:#666; height: 40px; margin: 5px">取车门店:</p>
              <h1 v-text="outletsArr3.stationName" style="font-size: 16px;height: 28px; margin: 5px"></h1>
              <p style=" font-size: 24px; color:#666; height: 40px; margin: 5px">详细地址:</p>
              <h1 v-text="outletsArr3.stationLocation" style="margin: 5px;height: 28px;"></h1>
              <p style="font-size: 12px;font-weight: bolder;margin-left: 5px;height: 20px;color: #FF7123">门店电话: 021-6416980</p>
              <p style="font-size: 12px;font-weight: bolder;margin-left: 5px;height: 20px;color: #FF7123">营业时间: 08:00-21:00</p>
            </div>

            <!--车辆筛选-->
            <el-form :inline="true"style="border:1px solid #ccc;"  >
              <b1>车型选择:</b1>
                <el-carousel :interval="3000" type="card" height="120px" indicator-position="none" >
                  <el-carousel-item v-for="(item,index) in bannerArr" :key="item" class="lunbo" @click="carModel(index)" >
                    <b style=" height: 20px;width: 100%; margin: 0 auto;position: absolute">{{item.name}}</b>
                    <img :src="item.url"  style=" height:100%;width:100%;"/>
                  </el-carousel-item>
                </el-carousel>
              <hr>
                <el-text style="padding-left: 8px">热门品牌:</el-text>
              <el-popover placement="right"  :width="480" trigger="click">
                <template #reference>
                  <el-link style="float: right; margin-right: 20px" :underline="false" >全部品牌 ></el-link>
                </template>
              <!-- 所有品牌  -->
                <div>
                  <el-form-item
                      v-for="item in brandItems"
                      :key="item.label"
                      :label="item.label"
                      style="padding-left: 8px; margin-right: 5px"
                  >
                    <el-button
                        v-for="brand in item.brands"
                        :key="brand"
                        round
                        :class="{ 'selected': selectedBrands.includes(brand) }"
                        @click="toggleBrand(brand)"
                    >
                      {{ brand }}
                    </el-button>
                  </el-form-item>
                </div>
              </el-popover>
              <!--   热门品牌   -->
                <div style="margin-top: 5px;margin-bottom: 0; padding-left: 8px">
                  <el-button
                      v-for="brand in brandItems1"
                      :key="brand"
                      round
                      :class="{ 'selected': selectedBrands.includes(brand) }"
                      @click="toggleBrand(brand)"
                  >
                    {{ brand }}
                  </el-button>
                </div>

              <br>
              <!--  座位数量   -->
              <el-text style="margin-top: 5px;margin-bottom: 0; padding-left: 8px">座位数量:</el-text>

              <el-row :gutter="30" style="margin-right: 0">
                <el-col :span="5" v-for="(set, index) in set_number" :key="index" style="margin-right: 2px">
                  <div style="margin-top: 5px; padding-left: 8px">
                    <el-button
                        round
                        :class="{ 'button-active': activeIndices.includes(index) }"
                        @click="toggleButtonColor(index)"
                    >
                      {{ set }}
                    </el-button>
                  </div>
                </el-col>
              </el-row>
              <!--  车辆类型   -->
              <br>
                <el-text style="margin-top: 5px;margin-bottom: 0; padding-left: 8px">车辆类型:</el-text>
                <div style="margin-top: 5px; padding-left: 8px">
                  <el-button
                      v-for="brand in car_tpye"
                      :key="brand"
                      round
                      :class="{ 'selected': activeIndicesType.includes(brand) }"
                      @click="toggleButtonColorType(brand)"
                  >
                    {{ brand }}
                  </el-button>
                </div>
              <!--  车辆价格    -->
              <br>
                <el-text style="margin-top: 5px;margin-bottom: 0; padding-left: 8px">车辆价格:</el-text>
                <div style="margin-bottom: 15px">
                  <el-row :gutter="30" style="margin-right: 0">
                    <el-col :span="7" v-for="(set, index) in car_price" :key="index">
                      <div style="margin-top: 5px; padding-left: 8px">
                        <el-button
                            round
                            :class="{ 'button-active': activeIndicesPrice.includes(index) }"
                            @click="toggleButtonColorPrice(index)"
                        >
                          {{ set }}
                        </el-button>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              <!--  车辆套餐    -->
              <el-text style="margin-top: 5px;margin-bottom: 0; padding-left: 8px">车辆套餐:</el-text>
              <div style="margin-bottom: 15px">
                <el-row :gutter="30" style="margin-right: 0">
                  <el-col :span="7" v-for="(set, index) in combos" :key="index">
                    <div style="margin-top: 5px; padding-left: 8px">
                      <el-button
                          round
                          :class="{ 'button-active': activeIndicesCombo.includes(index) }"
                          @click="toggleButtonColorCombo(index)"
                      >
                        {{ set.name }}
                      </el-button>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-form>

        </el-aside>

        <el-main style="padding: 10px">
          <el-image src="/imgs/car/guangg.jpg" style="margin-top: 20px; border-radius: 10px"></el-image>
          <el-form v-if="dialogVisible">
              <div class="example-pagination-block">
                <div class="example-demonstration">
                  <el-card style=" border-radius: 10px; width: 100%;height: 200px " v-for="car in vehicleArr" :key="car" >
                  <el-image :src="BASE_URL+car.image" fit="contain" style="float: left; width: 200px; height: 160px;margin-right: 15px;border-radius: 10px;"></el-image>
                  <div style ="display: flex; justify-content: space-between; align-items: center;">
                    <h3 style="margin-top: 0;margin-bottom:5px" >{{car.brand}} {{car.name}} {{appTypeFormatter(car.type,car.displacement)}}</h3>
                    <span style="position:relative ;right: 0; font-size: 28px;"><span style="font-size: 18px">￥</span><b>{{ car.price }}</b><span style="font-size: 18px">/天</span>  </span>
                  </div>
                  <b1 style="margin-top: 0;color:rgba(60, 60, 90, .6); margin-bottom:0;" >{{formatLicense(car.license)}}|{{appGearsFormatter(car.gears)}}|{{appTypeFormatter(car.type,car.displacement)}}</b1>
                  <div style="display: flex; margin-top: 5px">
                    <span style="background-image: url('/imgs/car/xx.png');background-size: cover; width: 18px;height: 18px; margin-right: 3px"></span>
                    <span style="background-image: url('/imgs/car/xx.png');background-size: cover; width: 18px;height: 18px; margin-right: 3px"></span>
                    <span style="background-image: url('/imgs/car/xx.png');background-size: cover; width: 18px;height: 18px; margin-right: 3px"></span>
                    <span style="background-image: url('/imgs/car/xx.png');background-size: cover; width: 18px;height: 18px; margin-right: 3px"></span>
                    <span style="background-image: url('/imgs/car/xx.png');background-size: cover; width: 18px;height: 18px; margin-right: 3px"></span>
                    <span style="background-image: url('/imgs/car/xx.png');background-size: cover; width: 18px;height: 18px; margin-right: 3px"></span>
                    <span>5分</span>
                  </div>
                  <div style="display: flex;">
                    <p style="display: block ;border:1px solid rgba(191,120,44,.2); color:#bf782c; margin-top: 5px;margin-bottom: 5px; margin-right: 5px;padding: 2px;font-size: 14px">长征租车</p>
                    <p style="display: block ;border:1px solid rgba(191,120,44,.2); color:#bf782c; margin-top: 5px;margin-bottom: 5px; margin-right: 5px;padding: 2px;font-size: 14px">信用保证</p>

                  </div>
                  <div style ="display: flex; justify-content: space-between; align-items: center;">
                    <span style=" background-color: rgba(44,155,142,.05);border-radius: 50px; max-width: 350px;font-size: 16px; color: #409EFF;">{{ car.remark }}</span>
                    <el-button type="primary" round style="position:relative ;right: 0;width: 88px;height: 38px;color: white" @click="visible1(car)">立即预定</el-button>
                  </div>
                  </el-card>
                  <el-dialog :title="dialogTitle" v-model="dialogVisible1"  style="width:1000px;padding:40px;" >
                    <el-form label-width="80px">
                      <el-row :gutter="30">
                        <el-col :span="12">
                          <el-form-item label="车牌号">
                            <el-input  :model-value="cars1.license" ></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="汽车名称">
                            <el-input   :model-value="cars1.name"></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row :gutter="30">

                        <el-col :span="12">
                          <el-form-item label="每天价格">
                            <el-input  :model-value="cars1.price" ></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="租赁天数">
                            <el-input   :model-value="sumDay" ></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row :gutter="30">
                        <el-col :span="12">
                          <el-form-item label="总价格">
                            <el-input placeholder="请输入内容" :model-value="sumPrice" ></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="用户手机">
                            <el-input placeholder="请输入内容"></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row :gutter="30">
                        <el-col :span="12">
                          <el-form-item label="用户姓名">
                            <el-input placeholder="请输入内容" ></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="归还地点">
                            <el-input placeholder="请输入内容" :model-value="bakeStationName"></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-form>
                    <template #footer>
                      <el-button @click="handleClose">取消</el-button>
                      <el-button type="primary" @click="saveOrder()">提交订单</el-button>
                    </template>
                  </el-dialog>
                </div>
                <el-empty
                    image="/imgs/car/nocar.png"
                    description="抱歉，当前门店该时间段内车辆已租满，请重新选择其他门店或延长租期试试吧！您可以重新选择其他门店。"
                    v-if="zeroCar"
                />
              <el-pagination   layout="total, sizes, prev, pager, next, jumper"
                               :page-sizes="[5, 10, 15, 20]"
                               v-model:current-page="currentPage"
                               v-model:page-size="currentSize"
                               v-model:total="total"
                               @size-change="handleSizeChange"
                               @current-change="handleCurrentChange" />
            </div>

          </el-form>
          <el-form v-if="!dialogVisible">
            <div class="example-pagination-block">
              <div class="example-demonstration">
                <el-card style=" border-radius: 10px; width: 100%;height: 70px "  >

                    <span style="margin: 0 auto; font-size: 28px; color: #2c3e50"><b>{{combos[value].name}}</b></span>
                  <span style="margin-left: 20px; font-size: 25px; color: steelblue;"><span style="font-size: 18px">￥</span><b>{{ combos[value].price }}</b><span style="font-size: 18px">/天</span>  </span>
                  <el-button type="primary" round style=" float: right;width: 88px;height: 38px;color: white" @click="visible2()">立即预定</el-button>
                </el-card>
                <el-card style=" border-radius: 10px; width: 100%;height: 200px " v-for="car in vehicleArr" :key="car" >
                  <el-image :src="BASE_URL+car.image" fit="contain" style="float: left; width: 200px; height: 160px;margin-right: 15px;border-radius: 10px;"></el-image>
                  <div style ="display: flex; justify-content: space-between; align-items: center;">
                    <h3 style="margin-top: 0;margin-bottom:5px" >{{car.brand}} {{car.name}} {{appTypeFormatter(car.type,car.displacement)}}</h3>
                  </div>
                  <b1 style="margin-top: 0;color:rgba(60, 60, 90, .6); margin-bottom:0;" >{{formatLicense(car.license)}}|{{appGearsFormatter(car.gears)}}|{{appTypeFormatter(car.type,car.displacement)}}</b1>
                  <div style="display: flex; margin-top: 5px">
                    <span style="background-image: url('/imgs/car/xx.png');background-size: cover; width: 18px;height: 18px; margin-right: 3px"></span>
                    <span style="background-image: url('/imgs/car/xx.png');background-size: cover; width: 18px;height: 18px; margin-right: 3px"></span>
                    <span style="background-image: url('/imgs/car/xx.png');background-size: cover; width: 18px;height: 18px; margin-right: 3px"></span>
                    <span style="background-image: url('/imgs/car/xx.png');background-size: cover; width: 18px;height: 18px; margin-right: 3px"></span>
                    <span style="background-image: url('/imgs/car/xx.png');background-size: cover; width: 18px;height: 18px; margin-right: 3px"></span>
                    <span style="background-image: url('/imgs/car/xx.png');background-size: cover; width: 18px;height: 18px; margin-right: 3px"></span>
                    <span>5分</span>
                  </div>
                  <div style="display: flex;">
                    <p style="display: block ;border:1px solid rgba(191,120,44,.2); color:#bf782c; margin-top: 5px;margin-bottom: 5px; margin-right: 5px;padding: 2px;font-size: 14px">长征租车</p>
                    <p style="display: block ;border:1px solid rgba(191,120,44,.2); color:#bf782c; margin-top: 5px;margin-bottom: 5px; margin-right: 5px;padding: 2px;font-size: 14px">信用保证</p>
                  </div>
                  <span style=" background-color: rgba(44,155,142,.05);border-radius: 50px; max-width: 200px;font-size: 16px; color: #409EFF;">{{ car.remark }}</span>
                </el-card>
              </div>
              <el-empty
                  image="/imgs/car/nocar.png"
                  description="抱歉，当前门店该时间段内车辆已租满，请重新选择其他门店或延长租期试试吧！您可以重新选择其他门店。"
                  v-if="zeroCar"
              />
              <el-pagination   layout="total, sizes, prev, pager, next, jumper"
                               :page-sizes="[5, 10, 15, 20]"
                               v-model:current-page="currentPage"
                               v-model:page-size="currentSize"
                               v-model:total="total"
                               @size-change="handleSizeChange"
                               @current-change="handleCurrentChange" />
            </div>

          </el-form>
          <el-dialog v-model="dialogVisible2"  style="width:1000px;padding:40px;" >
            <el-form label-width="80px">
              <el-row :gutter="30">
                <el-col :span="12">
                  <el-form-item label="订单编号">
                    <el-input placeholder="请输入内容"  ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="归还地点">
                    <el-input placeholder="请输入内容"  ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="30">
                <el-col :span="12">
                  <el-form-item label="套餐名称">
                    <el-input placeholder="请输入内容"  ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="每天价格">
                    <el-input placeholder="请输入内容" ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="30">
                <el-col :span="12">
                  <el-form-item label="租赁天数">
                    <el-input placeholder="请输入内容"  ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="总价格">
                    <el-input placeholder="请输入内容" ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="30">
                <el-col :span="12">
                  <el-form-item label="用户手机">
                    <el-input placeholder="请输入内容"  ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="用户姓名">
                    <el-input placeholder="请输入内容" ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <template #footer>
              <el-button @click="handleClose">取消</el-button>
              <el-button type="primary" @click="saveVehicle">提交订单</el-button>
            </template>
          </el-dialog>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import router from "@/router";
import {nextTick, onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

const dialogTitle = ref('订单窗口');
//定义变量用于保存起止时间
const times1= ref([]);

const dialogVisible = ref(true);
//订单窗口的显示
const dialogVisible1=ref(false)
//保存订单信息
const order=ref({
  customerId:"1",
  vehicleId:"",
  fetchStationId:"",
  backStationId:"",
  gmtFetch:"",
  gmtBack:""
})
//
const cars1=ref({
  name:"",
  license:"",
  price:"",
});
const sumDay=ref();
const sumPrice=ref();
const bakeStationName=ref();
const visible1=(cars)=>{
  if(times1.value.length==0 || selectStationName.value.takeStation=="" || selectStationName.value.bakeStation==""){
    ElMessage.error("请先选择时间或取车和还车地点");
    return;
  }
  console.log("站点名称"+selectStationName.value.bakeStation)
  cars1.value.license=cars.license;
  cars1.value.name=cars.name;
  cars1.value.price=cars.price;
  //计算时间
  const date1 = new Date(times1.value[0]);
  const date2 = new Date(times1.value[1]);
  // 计算两个日期的毫秒数差
  const diffInMilliseconds = Math.abs(date2 - date1);
  // 将毫秒数差转换为天数
  const diffInDays = diffInMilliseconds / (1000 * 60 * 60 * 24);
  sumDay.value=Number(diffInDays) ;
  console.log("时间"+sumDay.value)
  //计算总价格
  sumPrice.value=Number(sumDay.value)*cars.price;
  console.log("总价格"+sumPrice.value)
  //回显还车门店
  for (let i = 0; i < outletsArr2.value.length; i++) {
    console.log("111"+selectStationName.value.bakeStation)
    if(outletsArr2.value[i].id===selectStationName.value.bakeStation){
      bakeStationName.value=outletsArr2.value[i].stationName;
    }
  }
  dialogVisible1.value=true;
  //保存订单信息
  order.value.vehicleId=cars.id;
  order.value.fetchStationId=selectStationName.value.takeStation;
  order.value.backStationId=selectStationName.value.bakeStation;
  order.value.gmtFetch=times1.value[0];
  order.value.gmtBack=times1.value[1];
}
//新增订单
const saveOrder=()=>{
  let data=qs.stringify(order.value);
  axios.post(BASE_URL+'/v1/order/save',data).then((response)=>{
    if(response.data.code==2000){
      if(confirm('是否提交订单?')){
        dialogVisible1.value=false;
        selectCars();
      }
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}
const dialogVisible2=ref(false)
const visible2=()=>{
  dialogVisible2.value=true;
}

//租车地点的是否显示
const stationVisible=ref(false);
const selectedCity=ref("朝阳");
const setCity=(city)=>{
  selectedCity.value=city;
  outletsArr1.value=[];
}
//保存城市查询
const selectedCity1=ref("朝阳");
const setCity1=(city)=>{
  selectedCity1.value=city;
  outletsArr2.value=[];
}
//根据城市查询
const selectStationName=ref({takeStation:"",bakeStation:""})//取车门店，还车门店 id
let value2=0;
const insertOutletId=(value)=>{
    selectStationName.value.takeStation=value;
    value2=1;
    loadOutlets3(value)
}

//取车门店
const outletsArr1=ref([]);
const outlets1=ref({stationName:"",stationLocation:""})
const loadOutlets1=(location)=>{
  outlets1.value.stationLocation=location;
  let data=qs.stringify(outlets1.value);
  axios.get(BASE_URL+"/v1/vehicle/selectStation?"+data).then((response)=>{
    if(response.data.code==2000){
      outletsArr1.value=response.data.data;
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
//还车门店
const outletsArr2=ref([]);
const loadOutlets2=(stationLocation)=>{
  axios.get(BASE_URL+"/v1/vehicle/selectStation?stationLocation="+stationLocation).then((response)=>{
    if(response.data.code==2000){
      outletsArr2.value=response.data.data;
    }else{
      ElMessage.error(response.data.msg);
    }
  })

}
//回显取车门店
const visibleStation2=()=>{
  if(value2 ==1){
   stationVisible.value=true;
  }
  selectCars();
}
const stationPosition=ref({x:"116.4040",y:"39.9150"});


const outletsArr3=ref([]);
const loadOutlets3=(id)=>{
  axios.get(BASE_URL+"/v1/vehicle/selectStation?id="+id).then((response)=>{
    if(response.data.code==2000){
      outletsArr3.value=response.data.data[0];
      const stationPosition1 = JSON.parse(outletsArr3.value.stationPosition);
      stationPosition.value.x=stationPosition1.lng;
      stationPosition.value.y=stationPosition1.lat;
      loadOutlets4();
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}

//地图标点
const markersData = ref([]);
const outletsArr4=ref([]);
const loadOutlets4 = () => {
  axios.get(BASE_URL + "/v1/vehicle/selectStation").then((response) => {
    if (response.data.code == 2000) {
      outletsArr4.value = response.data.data;
      markersData.value = outletsArr4.value.map(item => ({
        id: item.id,
        stationName: item.stationName,
        stationLocation: item.stationLocation,
        stationPosition: JSON.parse(item.stationPosition),
        createTime: item.createTime,
      }));
      let map = new BMapGL.Map("mapContainer");
      let point = new BMapGL.Point(stationPosition.value.x, stationPosition.value.y);
      map.centerAndZoom(point, 15);

      markersData.value.forEach((markerData) => {
        let icon = new BMapGL.Icon(
            'https://s1.4sai.com/src/img/png/02/0289165d4f314db78acb9e77bd4e6948.png?e=1735488000&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:VI4gpo1M00uRNzCyyiKhoZ6Ab_w=',
            new BMapGL.Size(30, 45)
        );
        let marker = new BMapGL.Marker(new BMapGL.Point(markerData.stationPosition.lng, markerData.stationPosition.lat), { icon: icon });

        map.addOverlay(marker);

        marker.addEventListener('click', () => {
          let infoWindowContent = `
            <div style="width: 300px;margin:0">
              <h2 style="margin-top:0">站点名称：${markerData.stationName}</h2>
              <p>站点位置：${markerData.stationLocation}</p>
              <p>门店电话：021-64160981</p>
              <span>营业时间：8:00-21:00</span>
            </div>
          `;
          // 创建信息窗口
          let infoWindow = new BMapGL.InfoWindow(infoWindowContent);
          map.openInfoWindow(infoWindow, marker.getPosition());
        });
      });

      console.log(markersData.value);
    } else {
      ElMessage.error(response.data.msg);
    }
  });
};
// 保存车辆类型
const carModel=(index)=>{
  cars.value.model=(index+1)*10;
  selectCars();
}
// 使用数组存储选中的品牌
const selectedBrands = ref([]);
// 切换品牌选中状态
  const toggleBrand=(index)=>{
    if (index === 0) {
      // 如果点击的是第一个按钮
      if (selectedBrands.value.includes(0)) {
        // 如果第一个按钮已经是激活状态，则取消激活
        selectedBrands.value = selectedBrands.value.filter(i => i !== 0);
      } else {
        // 如果第一个按钮不是激活状态，则激活它
        selectedBrands.value = [0];
      }
    } else {
      // 如果点击的是其他按钮
      if (selectedBrands.value.includes(index)) {
        // 如果当前按钮已经是激活状态，则取消激活
        selectedBrands.value = selectedBrands.value.filter(i => i !== index);
      } else {
        // 如果当前按钮不是激活状态，则激活它并重置第一个按钮的状态
        selectedBrands.value = [index];
      }
      // 重置第一个按钮的状态
      if (selectedBrands.value.includes(0)) {
        selectedBrands.value = selectedBrands.value.filter(i => i !== 0);
      }
    }
    if (selectedBrands.value != "全部"){
      cars.value.brand=selectedBrands.value[0];
    }else {
      cars.value.brand="";
    }
    selectCars();
  }

  // 假设品牌数据是这样的结构
  const brandItems1 = ref(['全部','宝马', '奥迪', '大众']);
  const brandItems = ref([
    { label: 'A', brands: ['奥迪'] },
    { label: 'B', brands: ['宝马', '比亚迪', '北京现代', '奔驰', '保时捷'] },
    { label: 'D', brands: ['东风日产', '大众', '道奇'] },
    { label: 'F', brands: ['福特', '法拉利'] },
    { label: 'L', brands: ['路虎'] },
    { label: 'M', brands: ['马自达'] },
    { label: 'R', brands: ['日产'] },
    { label: 'T', brands: ['特斯拉'] },
    { label: 'W', brands: ['五菱'] },
    { label: 'X', brands: ['雪佛兰', '现代'] },
    { label: 'B', brands: ['依维柯', '宇通'] },
    // ... 其他品牌
  ]);
// 座位数量
  const  set_number=ref(['2座','4座','5座','7座','9座','15座','30座'])
  const activeIndices = ref([]);
  const toggleButtonColor=(index)=>{
    if (index === 0) {
      // 如果点击的是第一个按钮
      if (activeIndices.value.includes(0)) {
        // 如果第一个按钮已经是激活状态，则取消激活
        activeIndices.value = activeIndices.value.filter(i => i !== 0);
      } else {
        // 如果第一个按钮不是激活状态，则激活它
        activeIndices.value = [0];
      }
    } else {
      // 如果点击的是其他按钮
      if (activeIndices.value.includes(index)) {
        // 如果当前按钮已经是激活状态，则取消激活
        activeIndices.value = activeIndices.value.filter(i => i !== index);
      } else {
        // 如果当前按钮不是激活状态，则激活它并重置第一个按钮的状态
        activeIndices.value = [index];
      }
      // 重置第一个按钮的状态
      if (activeIndices.value.includes(0)) {
        activeIndices.value = activeIndices.value.filter(i => i !== 0);
      }
    }
    if (set_number.value[activeIndices.value]==set_number.value[0]){
     cars.value.seatNumber=2;
    }else if(set_number.value[activeIndices.value]==set_number.value[1]){
      cars.value.seatNumber=4;
    }else if(set_number.value[activeIndices.value]==set_number.value[2]){
      cars.value.seatNumber=5;
    }else if(set_number.value[activeIndices.value]==set_number.value[3]){
      cars.value.seatNumber=7;
    }else if(set_number.value[activeIndices.value]==set_number.value[4]){
      cars.value.seatNumber=9;
    }else if(set_number.value[activeIndices.value]==set_number.value[5]){
      cars.value.seatNumber=15;
    }else if(set_number.value[activeIndices.value]==set_number.value[6]){
      cars.value.seatNumber=30;
    }else {
      cars.value.seatNumber="";
    }
    selectCars();
  }
//车辆类型
  const car_tpye=ref(['电车','油车'])
  const activeIndicesType = ref([]);
    const toggleButtonColorType=(index)=>{
      if (index === 0) {
        // 如果点击的是第一个按钮
        if (activeIndicesType.value.includes(0)) {
          // 如果第一个按钮已经是激活状态，则取消激活
          activeIndicesType.value = activeIndicesType.value.filter(i => i !== 0);

        } else {
          // 如果第一个按钮不是激活状态，则激活它
          activeIndicesType.value = [0];
        }
      } else {
        // 如果点击的是其他按钮
        if (activeIndicesType.value.includes(index)) {
          // 如果当前按钮已经是激活状态，则取消激活
          activeIndicesType.value = activeIndicesType.value.filter(i => i !== index);
        } else {
          // 如果当前按钮不是激活状态，则激活它并重置第一个按钮的状态
          activeIndicesType.value = [index];
        }
        // 重置第一个按钮的状态
        if (activeIndicesType.value.includes(0)) {
          activeIndicesType.value = activeIndicesType.value.filter(i => i !== 0);
        }
      }
        if(activeIndicesType.value==car_tpye.value[0]){
           cars.value.type=10;
        }else if(activeIndicesType.value==car_tpye.value[1]){
          cars.value.type=20;
        }else {
          cars.value.type="";
        }



      selectCars();
    }
//车辆价格
  const car_price=ref(['100元以下','100-200元','200-300元','300-400元','400-500元','500元以上'])
  const activeIndicesPrice = ref([]);

  const toggleButtonColorPrice=(index)=>{
    if (index === 0) {
      // 如果点击的是第一个按钮
      if (activeIndicesPrice.value.includes(0)) {
        // 如果第一个按钮已经是激活状态，则取消激活
        activeIndicesPrice.value = activeIndicesPrice.value.filter(i => i !== 0);
      } else {
        // 如果第一个按钮不是激活状态，则激活它
        activeIndicesPrice.value = [0];
      }
    } else {
      // 如果点击的是其他按钮
      if (activeIndicesPrice.value.includes(index)) {
        // 如果当前按钮已经是激活状态，则取消激活
        activeIndicesPrice.value = activeIndicesPrice.value.filter(i => i !== index);
      } else {
        // 如果当前按钮不是激活状态，则激活它并重置第一个按钮的状态
        activeIndicesPrice.value = [index];
      }
      // 重置第一个按钮的状态
      if (activeIndicesPrice.value.includes(0)) {
        activeIndicesPrice.value = activeIndicesPrice.value.filter(i => i !== 0);
      }
    }
    if( car_price.value[activeIndicesPrice.value]==car_price.value[0]){
      cars.value.priceMin=0;
      cars.value.priceMax=99;
    }else if(car_price.value[activeIndicesPrice.value] ==car_price.value[1]){
      cars.value.priceMin=100;
      cars.value.priceMax=199;
    }else if(car_price.value[activeIndicesPrice.value] ==car_price.value[2]){
      cars.value.priceMin=200;
      cars.value.priceMax=299;
    }else if(car_price.value[activeIndicesPrice.value] ==car_price.value[3]){
      cars.value.priceMin=300;
      cars.value.priceMax=399;
    }else if(car_price.value[activeIndicesPrice.value] ==car_price.value[4]){
      cars.value.priceMin=400;
      cars.value.priceMax=499;
    }else if(car_price.value[activeIndicesPrice.value] ==car_price.value[5]){
      cars.value.priceMin=500;
      cars.value.priceMax=1000000;
    }else {
      cars.value.priceMin="";
      cars.value.priceMax="";
    }
    selectCars();
  }

//车辆套餐
  const combos=ref([])
  const activeIndicesCombo = ref([]);
  const value =ref()
  const toggleButtonColorCombo=(index)=>{
      value.value=index;
    if (index === 0) {
      // 如果点击的是第一个按钮
      if (activeIndicesCombo.value.includes(0)) {
        // 如果第一个按钮已经是激活状态，则取消激活
        activeIndicesCombo.value = activeIndicesCombo.value.filter(i => i !== 0);
        cars.value.comboId=""
        cars.value.status=1
        dialogVisible.value=true;

      } else {
        // 如果第一个按钮不是激活状态，则激活它
        activeIndicesCombo.value = [0];
        cars.value.status=3
        cars.value.comboId=index+1;

        dialogVisible.value=false;
      }
    } else {
      // 如果点击的是其他按钮
      if (activeIndicesCombo.value.includes(index)) {
        // 如果当前按钮已经是激活状态，则取消激活
        activeIndicesCombo.value = activeIndicesCombo.value.filter(i => i !== index);
        cars.value.comboId=""
        cars.value.status=1

        dialogVisible.value=true;
      } else {
        // 如果当前按钮不是激活状态，则激活它并重置第一个按钮的状态
        activeIndicesCombo.value = [index];
        cars.value.status=3
        cars.value.comboId=index+1;

        dialogVisible.value=false;

      }
      // 重置第一个按钮的状态
      if (activeIndicesCombo.value.includes(0)) {
        activeIndicesCombo.value = activeIndicesCombo.value.filter(i => i !== 0);
      }
    }

    selectCars();

  }
  //车辆套餐名称转换
const combosArr=ref([]);
const appComboFormatter=(id)=>{
  const data=qs.stringify(id)
  axios.get(BASE_URL+"/v1/combo/select?id="+data).then((response)=>{
    if(response.data.code==2000){
      combos.value=response.data.data;
    }else {
      ElMessage.error(response.data.msg);
    }
  })

}
//保存查询结果
  const number=ref();
  const zeroCar=ref(false);
  const vehicleArr=ref([]);
  const cars=ref({
    brand:"",
    seatNumber:"",
    model:"",
    type:"",
    priceMin:"",
    priceMax:"",
    comboId:"",
    status:"1",
    outletsId:""
  });
  const selectCars=()=>{
    cars.value.pageSize = currentSize.value;
    cars.value.pageNum = currentPage.value;
    console.log(cars.value)
    let data=qs.stringify(cars.value);
    console.log(cars.value)
    axios.get(BASE_URL+'/v1/vehicle/select?'+data).then((response)=>{
      if(response.data.code==2000){
        vehicleArr.value = response.data.data.list;//所以要多加一层list
        total.value = response.data.data.total;
        if(vehicleArr.value.length==0){
          zeroCar.value=true;
        }else {
          zeroCar.value=false;
        }
      }else{
        ElMessage.error(response.data.msg);
      }
    })
  }
//使车辆分页

//定义变量保存分页器的当前页数
const currentPage = ref(1);
//定义变量保存分页器的每页显示多少条
const currentSize = ref(5);
//定义变量保存数据总条目数
const total = ref(100);
//修改每页显示多少条，触发此函数
const handleSizeChange = (val) => {
  console.log('每页展示' + val + '条数据');
  selectCars();
}
//修改当前页码，触发此函数
const handleCurrentChange = (val) => {
  console.log('当前的页数为：' + val);
  selectCars();
}
//地图组件
const baiduMap=()=>{
  //表示在DOM更新之后再执行,因为我们要确保上方div创建之后再给div里渲染地图
  nextTick(()=>{
    //第7步:创建地图示例,注意:不要引入,忽略提示!
    let map = new BMapGL.Map("mapContainer");
    //第8步:设置中心点坐标，设置经纬度
    let point = new BMapGL.Point(stationPosition.value.x, stationPosition.value.y);
    //第9步：设置地图显示的中心点与地图缩放级别
    map.centerAndZoom(point, 15);
  })
  markersData.value.forEach((markerData) => {
    let icon = new BMapGL.Icon(
        'https://s1.4sai.com/src/img/png/02/0289165d4f314db78acb9e77bd4e6948.png?e=1735488000&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:VI4gpo1M00uRNzCyyiKhoZ6Ab_w=',
        new BMapGL.Size(30, 45)
    );
    let marker = new BMapGL.Marker(new BMapGL.Point(markerData.stationPosition.lng, markerData.stationPosition.lat), { icon: icon });

    map.addOverlay(marker);

    marker.addEventListener('click', () => {
      let infoWindowContent = `
            <div style="width: 300px;margin:0">
              <h2 style="margin-top:0">站点名称：${markerData.stationName}</h2>
              <p>站点位置：${markerData.stationLocation}</p>
              <p>门店电话：021-64160981</p>
              <span>营业时间：8:00-21:00</span>
            </div>
          `;
      // 创建信息窗口
      let infoWindow = new BMapGL.InfoWindow(infoWindowContent);
      map.openInfoWindow(infoWindow, marker.getPosition());
    });
  });
}
onMounted(()=>{
  loadOutlets4()
  //加载车辆
  selectCars();
  appComboFormatter();
})
//轮播图图片
const bannerArr = ref([
    {name:"小轿车",url:"/imgs/car/xjc.jpg"},
    {name:"中大型轿车",url:"/imgs/car/zdx.jpg"},
    {name:"SUV",url:"/imgs/car/suv.jpg"},
    {name:"跑车",url:"/imgs/car/pc.jpg"},
    {name:"皮卡",url:"/imgs/car/pk.jpg"},
    {name:"面包车",url:"/imgs/car/mb.jpg"},
    {name:"大巴车",url:"/imgs/car/db.jpg"},
]);
//隐藏车牌
const formatLicense=(license)=> {
  if (license && license.length >= 7) {
    return license.substring(0, 3) + '***' + license.substring(6);
  }
  return license;
}
//进行状态码格式转换
const appmodelFormatter=(cellValue)=>{
  if(cellValue==10){
    cellValue='小轿车';
  }
  else if(cellValue==20){
    cellValue='中大型轿车';
  }
  else if(cellValue==30){
    cellValue='SUV';
  }
  else if(cellValue==40){
    cellValue='跑车';
  }
  else if(cellValue==50){
    cellValue='皮卡';
  }
  else if(cellValue==60){
    cellValue='面包车';
  }
  else if(cellValue==70){
    cellValue='大巴车';
  }
  return cellValue

}
const appTypeFormatter=(cellValue,displacement)=>{
  if(cellValue==10){
    cellValue='电动车';
  }
  else if(cellValue==20) {
    cellValue=displacement
  }
  return cellValue
}
const appGearsFormatter=(cellValue)=>{
  if(cellValue==10){
    cellValue='自动挡';
  }
  else if(cellValue==20) {
    cellValue = '手动挡';
  }
  return cellValue
}

</script>

<style scoped>

  .example-pagination-block + .example-pagination-block {
    margin-top: 10px;
  }
  .example-pagination-block .example-demonstration {
    margin-bottom: 16px;
  }
  /* 定义选中品牌的样式 */
  .selected {
    background-color: #409eff; /* Element Plus 的主题色 */
    color: white;
  }
  .button-active {
    background-color: #409EFF; /* 这是按钮激活时的颜色 */
    color: white; /* 这是按钮激活时文字的颜色 */
  }
  .cxbutton{
    background-color: #0eabee;
    font-size: 20px;
    width: 85px;
    height: 40px;
    box-shadow:-0.5px 1px 5px 1px #2c82dc;
  }
 .cxbutton:hover{
    background-color: #5fade8;
    color: #fff;
  }
 .citysel{
   width: 72px;
   margin-right: 4px;
   outline-color: #23b7b7;
 }
 .row1 a:hover{
   background-color: #5fade8;
   color: #fff;
 }
  .el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
  .lunbo{
    color:#666;
    text-align: center;
    background-color:rgba(99,0,0,90%) ;
  }

  .lunbo:hover{
    color: #0eabee;
  }

</style>